<template>
  <page-header-wrapper :title="false">
    <a-card style="margin-bottom:20px">
      <standard-form-row title="视频名称" block>
        <a-auto-complete
          v-model="queryParam['filter[title]']"
          :data-source="searchSource"
          style="width:400px"
          placeholder="请输入要搜索的课件标题"
          @select="onSelect"
          @search="onSearch"
        />
        <!--        <a-input-search style="width: 300px" placeholder="请输入要搜索的内容" @search="onSearch"/>-->
      </standard-form-row>
      <standard-form-row title="培训分类" block>
        <a-radio-group v-model="currentTab" @change="onRadio">
          <a-radio-button :value="item.id" v-for="item in classes" :key="item.id">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>
      </standard-form-row>
    </a-card>
    <a-row :gutter="20">
      <a-col :span="12">
        <a-card size="small" title="近15天更新的课件">
          <s-table
            size="small"
            :row-key="(record) => record.id"
            :columns="latelyColumns"
            :data="latelyData"
            :showPagination="false"
          >
            <template slot="index" slot-scope="text,record,index">
              {{ index + 1 }}
            </template>
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="primary" @click="onPlayVideo(record)">播放</a-button>
            </template>
          </s-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card size="small" title="观看次数最多的课件">
          <s-table
            size="small"
            :row-key="(record) => record.id"
            :columns="mostColumns"
            :data="mostData"
            :showPagination="false"
          >
            <template slot="index" slot-scope="text,record,index">
              {{ index + 1 }}
            </template>
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="primary" @click="onPlayVideo(record)">播放</a-button>
            </template>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <a-card size="small" title="" style="margin-top:20px">
      <s-table
        ref="table"
        :row-key="(record) => record.id"
        :row-class-name="onClassName"
        :columns="allColumns"
        :data="allData"
      >
        <template slot="index" slot-scope="text,record,index">
          {{ index + 1 }}
        </template>
        <template slot="logs" slot-scope="text">
          {{ text }}/2
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" @click="onPlayVideo(record)">播放</a-button>
        </template>
      </s-table>
    </a-card>
    <player-wrapper v-if="visible" :video="video" @cancel="onCancel"></player-wrapper>
  </page-header-wrapper>
</template>

<script>
import { StandardFormRow, STable } from '@/components'
import PlayerWrapper from './components/PlayerWrapper'
import { getClass, getLatelyVideo, getMostVideo, getVideoList, searchComplete } from '@/api/video'
import videoColumns from '@/columns/video'

export default {
  components: {
    STable,
    StandardFormRow,
    PlayerWrapper
  },
  name: 'VideoView',
  data () {
    return {
      viewData: [],
      latelyColumns: videoColumns.lately,
      latelyData: parameters => {
        return getLatelyVideo(parameters).then(res => {
          return res.result
        })
      },
      mostColumns: videoColumns.most,
      mostData: parameters => {
        return getMostVideo(parameters).then(res => {
          return res.result
        })
      },
      allColumns: videoColumns.all,
      allData: parameters => {
        return getVideoList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      loading: false,
      currentTab: '1',
      classData: [],
      video: {},
      visible: false,
      queryParam: {},
      classes: [],
      classTitle: '',
      searchSource: []
    }
  },
  created () {
    this.getClasses()
    this.queryParam['filter[class]'] = this.currentTab
  },
  methods: {
    getClasses () {
      const app = this
      getClass().then(res => {
        app.classes = res.result.data
      })
    },
    onPlayVideo (video) {
      this.video = video
      this.visible = true
    },
    onCancel (visible) {
      this.visible = visible
    },
    // onSearch (value) {
    //   this.queryParam['title'] = value
    // },
    onRadio (e) {
      this.queryParam['filter[class]'] = e.target.value
      this.$refs.table.refresh(true)
    },
    onClassName (record) {
      if (record.logs === 0) {
        return 'table-color-dust'
      }
      if (record.logs === 1) {
        return 'table-color-dust1'
      }
      if (record.logs === 2) {
        return 'table-color-dust2'
      }
    },
    // onChange (value) {
    //   searchComplete(value).then(res => {
    //     this.searchSource = res.result
    //   })
    // },
    onSelect (value) {
      this.queryParam['title'] = value
      this.$refs.table.refresh(true)
    },
    onSearch (searchText) {
      searchComplete(searchText).then(res => {
        this.searchSource = res.result.title_data
      })
    }
  }
}
</script>

<style>
.ant-table-tbody > tr.table-color-dust {
  background-color: #ffcccc;
}
.ant-table-tbody > tr.table-color-dust1 {
  background-color: #000;
}
.ant-table-tbody > tr.table-color-dust2 {
  background-color: #f00;
}
</style>
